import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import Commucation from './Commucation';
import OrderInfo from './OrderInfo';
import Customer from './Customer';
import GoodsInfo from './GoodsInfo';
import './style.less';
import { showMsg } from '@/utils/utils';
import { getShopOrderDetail } from '@/services/shop/api';
import { history } from 'umi';
import BreadcrumbDept from '@/components/BreadcrumbDept';

interface DetailProps {
  location?: any;
}

const Detail: React.FC<DetailProps> = (props) => {
  const { location } = props;
  const { query } = location;
  const { order_id, complain_id } = query;
  const [orderDetail, setOrderDetail] = useState<SHOPAPI.ShopOrder>({} as SHOPAPI.ShopOrder)

  const fetchOrderDetail = async () => {
    try {
      const data = await getShopOrderDetail(order_id)
      setOrderDetail(data)
    } catch (error) {
      showMsg(error?.data?.errmsg)
    }
  }


  useEffect(() => {
    if (order_id) {
      fetchOrderDetail()
    }
  }, [order_id])
  
  return (
    <PageContainer title="订单投诉详情" extra={[
      <BreadcrumbDept />
     ]} className="complain-detail" breadcrumb={{}} onBack={() => history.goBack()}>
      <Commucation complain_id={complain_id} />

      <OrderInfo detail={orderDetail} />
      {
        orderDetail.ship_method !== 'Z' && <Customer detail={orderDetail} />
      }
      
      <GoodsInfo 
      title={orderDetail.ship_method !== 'Z' ? '4. 商品信息' : '3. 商品信息'}
      goodsList={orderDetail.order_goods_list || []} />
    </PageContainer>
  );
};
export default Detail;
